<template>
  <div class="animated fadeInLeft">
    <div class="user-card">
      <el-image
        :src="require('@/assets/img/user-info.png')"
        fit="scale-down"
        class="info-back"
      />
      <div class="user-info">
        <div style="display: flex; align-items: center">
          <el-avatar :src="user?.avatar" :size="mobile === 'false' ? 40 : 50">{{
            user?.nickname
          }}</el-avatar>
          <div
            style="
              font-weight: 600;
              margin-left: 10px;
              color: #fff;
              margin-right: 10px;
            "
          >
            {{ user?.nickname || "未知" }}
          </div>
          <div style="text-align: left">
            <div style="display: flex; align-items: center">
              <div v-if="user?.level === 0" class="user-normal">未激活</div>
              <div v-else class="user-vip">会员</div>
            </div>
          </div>
        </div>
        <div
          class="data-items"
          :class="{ pc: mobile === 'false' ? false : true }"
        >
          <div>
            <div class="fweight">粉丝数</div>
            <div>{{ user?.collects }}</div>
          </div>
          <div>
            <div class="fweight">获赞数</div>
            <div>
              {{ tool.numberTo(user?.videoCounts.likeCount) }}
            </div>
          </div>
          <div>
            <div class="fweight">播放数</div>
            <div>{{ tool.numberTo(user?.videoCounts.lookCount) }}</div>
          </div>
          <div>
            <div class="fweight">收藏数</div>
            <div>{{ tool.numberTo(user?.videoCounts.collectCount) }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频信息 -->
    <div style="width: 100%; min-height: 40vh; padding: 20px 0">
      <div
        class="video-pc"
        v-loading="loading"
        v-if="mobile === 'false' ? false : true"
      >
        <div v-for="item of videoList" :key="item.id">
          <homeVideoPc :data="item"></homeVideoPc>
        </div>
      </div>
      <div class="video-group" v-loading="loading" style="width: 100%" v-else>
        <div v-for="item of videoList" :key="item.id">
          <homeVideoPc :data="item"></homeVideoPc>
        </div>
      </div>
      <div v-if="loadmore" class="loading" @click="more">{{ title }}</div>
      <el-empty description="空数据" v-if="videoList.length <= 0" />
    </div>
  </div>
</template>

<script setup>
// import { ref } from "vue";

import request from "@/assets/js/request";
import tool from "@/assets/js/tool";
import { ElMessage } from "element-plus";
import { onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";
import homeVideoPc from "@/components/video/user/user-video-pc.vue";

const title = ref("加载更多");
const user = ref();
const videoList = ref([]);
const mobile = localStorage.getItem("mobile");
const route = useRoute();
const loading = ref(false);
const page = ref({
  current: 1,
  pages: 0,
  total: 0,
});

const loadmore = computed(() => {
  return page.value.current < page.value.pages;
});

const getUserInfo = (id) => {
  request
    .get(`/client/user/info?uid=${id}`)
    .then((res) => {
      if (res.code === 200) {
        user.value = res.data;
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
const more = () => {
  title.value = "加载中...";
  page.value.current += 1;
  getVideoList(route.query.uid);
};

const getVideoList = (id) => {
  loading.value = true;
  request
    .get(`/client/video/user/video?uid=${id}&current=${page.value.current}`)
    .then((res) => {
      if (res.code === 200) {
        videoList.value.push(...res.data.records);
        page.value.current = res.data.current;
        page.value.pages = res.data.pages;
        page.value.total = res.data.total;

        loading.value = false;
        title.value = "加载更多";
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });

  setTimeout(() => {
    if (loading.value) {
      loading.value = false;
      title.value = "加载更多";
    }
  }, 10000);
};

onMounted(() => {
  getUserInfo(route.query.uid);
  getVideoList(route.query.uid);
});
</script>

<style scoped lang="scss">
@mixin tag($back, $font) {
  background: $back;
  color: $font;
  margin-left: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 5px;
}

@mixin group-video($group, $gapWidth) {
  display: grid;
  grid-template-columns: repeat($group, 1fr);
  grid-gap: $gapWidth;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.user-card {
  height: 240px;
  background: #fff;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 1rem;
  box-sizing: border-box;
  .info-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
}

.user-info {
  position: relative;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.data-items {
  color: #fff;
  & > div {
    margin-bottom: 5px;
    text-align: center;
  }
  padding: 4px;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.5)
  );
}

.pc {
  display: flex;
  justify-content: center;
  align-items: center;
  & > div {
    padding: 10px 20px;
  }
  background: rgba(0, 0, 0, 0) !important ;
}

.user-normal {
  @include tag(#9e9e9e, #cccccc);
}

.user-vip {
  @include tag(#ecc179, #6d3c02);
}

.video-pc {
  @include group-video(5, 20px);
}

.video-group {
  @include group-video(2, 10px);
}

.loading {
  font-size: 14px;
  color: #5f5f5f;
  text-align: center;
  width: 100%;
  padding: 20px 0;
}
</style>
